<template>
  <div class="seller_list">
    <el-table
      :data="tableData"
      :tree-props="{ children: 'users' }"
      row-key="accountId"
      style="width: 100%"
      default-expand-
      all
      :row-class-name="tableRowClassName"
    >
      <!-- ID -->
      <el-table-column prop="accountId" label="账户ID" >
        <template #default="{ row }">
          {{ row.accountId || '--' }}
        </template>
      </el-table-column>

      <!-- 账户类型 -->
      <el-table-column prop="accountType" label="账户类型" >
        <template #default="{ row }">
          {{ row.accountType || '' }}
        </template>
      </el-table-column>

      <!-- 账户余额 -->
      <el-table-column prop="balance" label="账户余额" >
        <template #default="{ row }">
          <span v-if="row.balance">￥{{ row.balance }}</span>
        </template>
      </el-table-column>

      <!-- 用户ID -->
      <el-table-column prop="userId" label="用户ID" >
        <template #default="{ row }">
          {{ row.userId || '' }}
        </template>
      </el-table-column>

      <!-- 用户名 -->
      <el-table-column prop="username" label="用户名" >
        <template #default="{ row }">
          {{ row.username || '' }}
        </template>
      </el-table-column>

      <!-- 角色 -->
      <el-table-column prop="roleName" label="角色" >
        <template #default="{ row }">
          {{ row.roleName || '' }}
        </template>
      </el-table-column>

      <!-- 手机号 -->
      <el-table-column prop="phoneNumber" label="手机号" width="140">
        <template #default="{ row }">
          {{ row.phoneNumber || '' }}
        </template>
      </el-table-column>

      <!-- 邮箱 -->
      <el-table-column prop="email" label="邮箱" width="200">
        <template #default="{ row }">
          {{ row.email || '' }}
        </template>
      </el-table-column>

      <!-- 昵称 -->
      <el-table-column prop="nickname" label="昵称" >
        <template #default="{ row }">
          {{ row.nickname || '' }}
        </template>
      </el-table-column>

      <!-- 注册时间 -->
      <el-table-column prop="registrationDate" label="注册时间" width="180">
        <template #default="{ row }">
          {{ row.registrationDate ? formatTime(row.registrationDate) : '' }}
        </template>
      </el-table-column>

      <!-- 最后登录 -->
      <el-table-column prop="lastLogin" label="最后登录" width="180">
        <template #default="{ row }">
          {{ row.lastLogin ? formatTime(row.lastLogin) : '' }}
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-affix position="bottom" :offset="50">
      <div class="pagination_box">
        <Pagination
          v-model:currentPage="queryParams.pageNumber"
          v-model:pageSize="queryParams.pageSize"
          :total="queryParams.total"
          @pageChange="handlePageChange"
        ></Pagination>
      </div>
    </el-affix>
  </div>
</template>


<script setup>
import { ref, onMounted } from 'vue'
import { getAllSellerList } from '@/api/sellerList'
import dayjs from 'dayjs'

// 表格数据
const tableData = ref([])

const queryParams = ref({
  pageNumber: 1,
  pageSize: 15,
  total: 0
})

// 获取商家列表数据
const getAllSellerListFn = async () => {
  const res = await getAllSellerList(queryParams.value, {})
  console.log('接口返回：', res)
  tableData.value = res.content.map(formatAccountData)
  queryParams.value.total = res.totalElements
}

// 格式化数据
const formatAccountData = (data) => ({
  accountId: data.accountId,
  accountType: data.accountType,
  balance: data.balance,
  users: data.users.map(user => ({
    userId: user.userId,
    username: user.username,
    roleName: user.roleName,
    phoneNumber: user.phoneNumber,
    email: user.email,
    nickname: user.nickname,
    registrationDate: user.registrationDate,
    lastLogin: user.lastLogin
  }))
})

// 分页切换
const handlePageChange = () => {
  getAllSellerListFn()
}

// 时间格式化
const formatTime = (time) => {
  return time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : ''
}

// 动态行样式
const tableRowClassName = ({ row }) => {
  // 有 userId 就是子行
  if (row.userId) {
    return 'child-row'
  }
  return ''
}


onMounted(() => {
  getAllSellerListFn()
})
</script>



<style scoped lang="scss">
.seller_list {
  padding-bottom: 30px;

  .pagination_box {
    margin-bottom: 50px;
  }
  // 子行样式
  ::v-deep .el-table .child-row {
    background-color: #f0f0f0;
  }
}
</style>
